<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人博客</title>
<link href="css/boke.css" rel="stylesheet" type="text/css">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
<script type="text/javascript">
window.onload=function(){
	var next=document.getElementById("more-img");
	var content=document.getElementById("content");
	var top=document.getElementById("top");
	var cheight = document.documentElement.clientHeight || document.body.clientHeight;
	var menu =document.getElementById("menu");
	var setting = document.getElementById("setting");
	var btn1 = document.getElementById("btn1");
	var menuh3= document.getElementById("menu-h3");
  var navbg= document.getElementById("nav1");
  var bodybg= document.getElementById("body-bg");
	var timer = null;
	var timer2 = null;
	var timer3 = null;
	var timer4 = null;
	var timer5 = null;
	var istop = true;
  document.documentElement.scrollTop=document.body.scrollTop = 0;
	
	//滚动条事件触发
	window.onscroll = function(){
		var contop = document.documentElement.scrollTop || document.body.scrollTop;
		if(contop>=cheight){
		   top.style.display="block";
       nav1.className="body-bg nav1";
		}
		else{
			top.style.display="none";
      nav1.className="nav1";
			}
		if(!istop){
			clearInterval(timer2);
			}
			istop = false;
	}
	//显示更多内容
	next.onclick = function(){
		    content.style.display ="block";
			  timer = setInterval(function(){
			    
				var contop = document.documentElement.scrollTop || document.body.scrollTop;
				var ispeed = Math.ceil((1280-contop)/ 10);
				document.documentElement.scrollTop=document.body.scrollTop = contop+ ispeed;
				if(contop >= 1280){
					clearInterval(timer);
					}
				},20)	
	}
	//回到顶部
	top.onclick = function(){
		timer2 = setInterval(function(){
			
			var contop = document.documentElement.scrollTop || document.body.scrollTop;
			var ispeed2 = Math.floor(-contop/10);
			document.documentElement.scrollTop=document.body.scrollTop=contop+ispeed2;	
			istop = true;
			if(contop == 0){
				clearInterval(timer2);
				}	
		 },10)
		
	}
	//打开设置菜单界面
	menu.onclick = function(){
		    menuh3.className = "menu-h3 my33";
			  clearInterval(timer4);
        var settright = setting.style.right;
			  var ispeed4 = Math.ceil(-(parseInt(settright))/10);
		    timer4 =setInterval(function(){          
			    setting.style.right = parseInt(setting.style.right)+ispeed4+"px";
    			if(parseInt(setting.style.right) >= 0){
    				clearInterval(timer4);
    			}
    			},30)
		
	}
	//设置菜单关闭
    function menuclear(){
	    menuh3.className="menu-h3";
		var ispeed3 = Math.ceil(-(parseInt(setting.style.right)+25));
		timer3 =setInterval(function(){
			setting.style.right = parseInt(setting.style.right)+parseInt(ispeed3)+"px";
      bodybg.className="";
			if(parseInt(setting.style.right) <= -330){
				clearInterval(timer3);
			}
			},20)
		}
    btn1.onclick = menuclear;
    bodybg.onclick = menuclear;
   menu.onmouseover = function(){
	        menuh3.className = "menu-h3 my33";   
  }
  menu.onmouseout = function(){
	        menuh3.className = "menu-h3";   
  }
}
</script>
</head>
<body>
    
    <header id="head1">     
       <div class="bg">

           <nav id="nav1" class="nav1">
               <h1>黄小窝</h1>
               <div id="menu" class="menu">
                    <h3 id="menu-h3" class="menu-h3">
                    Menu</h3>
              
               </div>
               
               <div class="setting" id="setting" style="right:-3230px">
               <span>菜单</span>
                       <button id="btn1" >X</button>
                       <ul>
                           <li><a href="#">展示自己</a></li>
                           <li><a href="#">博客个性</a></li>
                           <li><a href="#">发表心情</a></li>
                           <li><a href="#">联系我们</a></li>
                       </ul>
                   </div>
           </nav>
            
           <div class="name1">
               <div class="hr hjc"></div>
               <h1>黄小窝</h1>
               <div class="hr hjc"></div>
               <p>我的地盘我做主！</p>
               <button>了解我</button>
           </div>
           <div id="more" class="more">

               <div id="more-img">
                   <img class="more-img"src="images/more.png" />
               </div>
           </div>
       </div>
    </header><!--头部-->
    <div id="content" class="content">
       <section class="green-sec">
           <div class="wapper">
              <h2>一个标题</h2>
              <div class="hr"></div> 
              <p>每个人都有自己美丽的故事...</p>
           </div>
           <div class="icon">
               <span>1</span>
               <span>2</span>
               <span>3</span>
           </div>
       </section>
       <section class="img-sec">
           <div class="article">
               <div class="imgage-sec">
                  <img src="images/pic01.jpg"/>
               </div>
               <div class="text-sec">
                   <h2>在一起的日子里</h2>
                   <h3>很喜欢那种感觉</h3>
                   <p>gTeach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
               </div>
           </div>
           <div class="article">
               <div class="text-sec">
                   <h2>在一起的日子里</h2>
                   <h3>很喜欢那种感觉</h3>
                   <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
               </div>
               <div class="imgage-sec">
                  <img src="images/pic02.jpg"/>
               </div>
            </div>
            <div class="article">
               <div class="imgage-sec">
                  <img src="images/pic03.jpg"/>
               </div>
               <div class="text-sec">
                   <h2>在一起的日子里</h2>
                   <h3>很喜欢那种感觉</h3>
                   <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
               </div>
           </div>
       </section>
       <section class="pic-sec">
           <div class="article-sec">
               <div class="heading">
                   <h2>不约</h2>
                   <div class="hr"></div>
                   <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
               </div>
               <div class="article-group">
                   <div class="article2">
                       <h2>标题1</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
                   <div class="article2">
                       <h2>标题2</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
               </div>
               <div class="article-group">
                   <div class="article2">
                       <h2>标题3</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
                   <div class="article2">
                       <h2>标题4</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
               </div>
               <div class="article-group">
                   <div class="article2">
                       <h2>标题5</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
                   <div class="article2">
                       <h2>标题6</h2>
                       <p>Teach him that for every scoundrel there is a hero; that for every crooked politician there is a dedicated leader; that for every enemy there is a friend.So, World, I wish you would sort of take him by his young hand and teach him the things he will have to know.</p>
                   </div>
               </div>
           </div>
       </section>
    </div>
<div id="body-bg"></div> 
<div id="top" class="top"></div>

</body>
</html>
